<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>借书单</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/base.css" />
	<style type="text/css">
		.book_list_1 {
			margin-top: 50px;
		}
		.borrowed {
			float: right;
			color: red;
			font-weight: bold;
			font-size: 1.5em;
		}
        .qrcode {
            width: 80%;
        }
        #del_bookbill {
        	margin-top: 10px;
        	border-left: 1px #ccc solid;
        }
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="window.history.back(-1)"></a>
		<h1 class="mui-title">借书单</h1>
        <a class="mui-icon mui-icon-plusempty mui-pull-right" onclick="scanCode();"></a>
	</header>

	<div class="book_list_1">
	<ul class="mui-table-view">

		<li id="{{ book.id }}" class="mui-table-view-cell mui-media">
			<a class="mui-icon mui-icon-chat mui-pull-right mui-active" id="del_bookbill" onclick="del(this);"></a>
			<a href="{{ url('library:book_detail', args=(book.book.id, )) }}">
				<img class="mui-media-object mui-pull-left" src="https://img3.doubanio.com/lpic/s29669694.jpg">
				<div class="mui-media-body">
					abc
					<p class="mui-ellipsis">def </p>
					<!--<a class="mui-ellipsis mui-icon mui-icon-trash"></a>-->
					<p class='mui-ellipsis'> 剩余 5 本</p>
				</div>
			</a>
		</li>

		</ul>
	</div>

    <div class="mui-content-padded">
		<button type="button" class="mui-btn mui-btn-block mui-btn-primary" id="scanCode" data-loading-text="正在生成中...">生成借书二维码</button>
	</div>

    <h3 class="mui-text-center">借书单为空</h3>

	<script type="text/javascript" src="../js/mui.min.js" ></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		function del(elem) {
			console.log(elem.parentElement.id)
//			li = $(this).parent();
//			console.log(li.id)
			$("ul.mui-table-view").append("<h1>abc</h1>");
			elem.parentElement.remove();
		}
	</script>
</body>

</html>
